.state-box
{
    display: inline-block;
    position: relative;
}
.state-box-active:before
{
    border-bottom: 5px solid #27c24c !important;
}
.state-box-active:after
{
    border-bottom: 5px solid #27c24c !important;
}
.state-box-active .state-box-item
{
    background-color: #27c24c !important;
    color: #ffffff !important;
}
.state-box-active span
{
    color: #27c24c;
}

.state-box-active-danger:before
{
    border-bottom: 5px solid #FFAC38 !important;
}
.state-box-active-danger:after
{
    border-bottom: 5px solid #FFAC38 !important;
}
.state-box-active-danger .state-box-item
{
    background-color: #FFAC38 !important;
    color: #ffffff !important;
}
.state-box-active-danger span
{
    color: #FFAC38;
}




.state-box-before:before
{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    border-bottom: 5px solid #eeeeee;
    position: absolute;
    left: 0;
    top:34px;
}
.state-box-after:after
{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    border-bottom: 5px solid #eeeeee;
    position: absolute;
    right: 0;
    top:34px;
    z-index: 0;
}
.state-box-item
{
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: #eeeeee;
    border-radius: 9999px;
    z-index: 3;
    position: relative;
}
.state-box-item i
{
    margin: 7px;
    vertical-align: middle;
    font-weight: bold;
    font-style: normal;
}
.orders-info-table
{
    border-spacing: 0;
    border-collapse: collapse;
}
.orders-info-table tr
{

    padding: 10px;
}
.orders-info-table tr td
{
    padding:5px;
}
.orders-info-box
{
    min-height: 200px;
}
.orders-box-con
{
    display: flex;
}